import { Modal, Form, Input, message, Select } from 'antd';
import React, { useState } from 'react';
import { apiDomain } from '../../constant';
import './index.scss';
import { scrollIntoView } from '../../utils';
import { useNavigate } from 'react-router-dom';

function App() {
  const [appointForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [btnLoading, setBtnLoading] = useState(false);
  const [currentDate, setCurrentDate] = useState('1110');
  const [activeMenu, setActiveMenu] = useState();
  const navigate = useNavigate();
  const [surveyForm] = Form.useForm();
  const [isSurveyModalOpen, setIsSurveyModalOpen] = useState(false);

  const showModal = () => {
    appointForm.resetFields();
    setBtnLoading(false);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    appointForm.submit();
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleFinish = (values) => {
    const {
      first_name, last_name, email, career, office,
    } = values;

    setBtnLoading(true);

    fetch(`${apiDomain}/api/system/email/user`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        first_name,
        last_name,
        email,
        career,
        office,
      })
    }).then(function (response) {
      return response.json();
    }).then(function (jsonData) {
      setBtnLoading(false);

      const { is_success } = jsonData;
      if (is_success) {
        message.success('提交成功！');
        setIsModalOpen(false);
      }
    }).catch(function () {
      message.error('出錯了，請稍後重試！');
      setBtnLoading(false);
    });
  }

  // 问卷调研
  const showSurveyModal = () => {
    surveyForm.resetFields();
    setBtnLoading(false);
    setIsSurveyModalOpen(true);
  };

  const handleSurveyOk = () => {
    surveyForm.submit();
  };

  const handleSurveyCancel = () => {
    setIsSurveyModalOpen(false);
  };

  const handleSurveyFinish = (values) => {
    const {
      satisfaction, suggestion
    } = values;

    setBtnLoading(true);

    fetch(`${apiDomain}/api/system/questionnaire`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        satisfaction,
        suggestion
      })
    }).then(function (response) {
      return response.json();
    }).then(function (jsonData) {
      setBtnLoading(false);

      const { is_success } = jsonData;
      if (is_success) {
        message.success('提交成功！');
        setIsSurveyModalOpen(false);
      }
    }).catch(function () {
      message.error('出錯了，請稍後重試！');
      setBtnLoading(false);
    });
  }

  const handleAddress = () => {
    window.open('https://surl.amap.com/1djaOXDFR8b6', '_blank');
  }

  const handleMenuClick = (type) => {
    setActiveMenu(type);

    const element = document.getElementById(type);

    // element.scrollIntoView({ behavior: 'smooth' });
    scrollIntoView(element, { offset: 92, duration: 300 });
  }

  const handleLogoClick = () => {
    window.open('https://www.chuhai.edu.hk', '_blank');
  }

  const handleLangClick = () => {
    navigate('/home/en');
  }

  return (
    <div className="road-show-index-ch">
      <div className="road-show-index-ch__header">
        <div className="logo" onClick={handleLogoClick}>
          <img src={require('../../images/logo1.png')} />
          <img src={require('../../images/logo2.jpg')} />
        </div>
        <div className="menu">
          <a className={activeMenu === 'intro' ? 'active' : ''} onClick={() => { handleMenuClick('intro') }}>研討會簡介</a>
          <a className={activeMenu === 'topic' ? 'active' : ''} onClick={() => { handleMenuClick('topic') }}>研討會日程</a>
          <a className={activeMenu === 'teacher' ? 'active' : ''} onClick={() => { handleMenuClick('teacher') }}>研討會講師</a>
          <div className="btn" onClick={showModal}>預約參會</div>
          <div className="btn survey-btn" onClick={showSurveyModal}>調查問卷</div>
          <div className="lang">
            <span className="disable">CH</span> / <span onClick={handleLangClick}>EN</span>
          </div>
        </div>
      </div>

      <div style={{ height: 92 }}></div>

      <div className="road-show-index-ch__banner" id="banner">
        <img src={require('../../images/banner.png')} />
        <div className="intro">
          <h2>粵語流行音樂在東南亞地區的發展學術研討會</h2>
          <h1>海外離散之音與鄉愁</h1>
          <div>
            <div className="time"><i></i>時間：11月10日-11月11日</div>
          </div>
          <div>
            <div className="location"><i></i>地點：香港</div>
          </div>
        </div>
      </div>

      {/* 研讨会说明 */}
      <div className="road-show-index-ch__intro" id="intro">
        <h1>海外離散之音與鄉愁：粵語流行音樂在東南亞地區的發展學術研討會</h1>
        <div>時至今日，在華語流行音樂的社會歷史研究中，粵語流行音樂（或廣東歌）在東南亞與海外華人社群的發展軌跡，尚欠缺完整或全面的探討和研究。為彌補此一缺憾，本次研討會將邀集各地的專家學者，集思廣益，為此領域建構科研基底，會議將涵蓋三個主要課題：</div>
        <div style={{ padding: '20px 0' }}>
          <div>1.	粵語流行音樂在東南亞流行音樂工業發展與其音樂場域中所扮演角色；</div>
          <div>2.	探索台灣及東南亞地區華人對粵語流行音樂的文化的共同記憶；</div>
          <div>3.	流行文化內在因素的變化如何影響粵語流行樂發展的興衰。</div>
        </div>
        <div>本次研討會除了將聚焦於粵語歌曲在東南亞地區的發展：包括新加坡、馬來西亞與台灣地區，同時也將觸角延伸至與緬泰越的華語社群中。透過檢視政治、經濟、文化等因素對粵語流行音樂發展的影響，希冀能進一步思索海外粵語歌曲在華文流行音樂板塊當中的不同位置與歷史位移，並重新審視其在華文地區流行文化工業體系中的地位。</div>
      </div>

      {/* 日程 */}
      <div className="road-show-index-ch__topic" id="topic">
        <div className="road-show-index-ch__topic__container">
          <h1>研討會日程</h1>
          <div className="road-show-index-ch__topic__main">
            <div className="road-show-index-ch__topic__date-list">
              <div className={currentDate === '1110' ? 'active' : ''} onClick={() => { setCurrentDate('1110') }}>
                <div className="date-week">
                  <div className="date">11月10日</div>
                  <div className="week">週五</div>
                </div>
                <div className="split">/</div>
                <div className="station">香港</div>
              </div>

              <div className={currentDate === '1111' ? 'active' : ''} onClick={() => { setCurrentDate('1111') }}>
                <div className="date-week">
                  <div className="date">11月11日</div>
                  <div className="week">週六</div>
                </div>
                <div className="split">/</div>
                <div className="station">香港</div>
              </div>
            </div>
            {
              currentDate === '1110' && (
                <div className="road-show-index-ch__topic__time-line">
                  <div className="station-detail">
                    <div className="station-detail__left">
                      <div className="station-detail__name"><i></i>香港站</div>
                      <div className="station-detail__address" onClick={handleAddress}>
                        <div>香港屯門青山公路青山灣段80號香港珠海学院 Hall 5</div>
                        <i></i>
                      </div>
                    </div>
                    <div className="station-detail__btn" onClick={showModal}>預約參會</div>
                  </div>

                  <div className="time-line">
                    <div className="time-line__item">
                      <span className="time-line__period">09:30 - 09:40</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">陳致，香港珠海學院校長<br/><i>歡迎辭</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:40 - 09:50</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">馮錦榮，香港珠海學院文學與社會科學院院長<br/><i>歡迎辭</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:50 - 10:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">大合照</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">第一場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">主持：李國芳，香港珠海學院新聞與傳播學系副教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:00 - 10:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">朱耀偉，香港大學香港研究課程教授<br/><i>風曾这样吹：粤語流行曲的亚洲流播</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:30 - 11:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">馮應謙，香港中文大學亞太研究所所長<br/><i>鄧麗君：形象、歌迷、社會</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:00 - 11:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">茶歇</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">第二場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>記憶的聲軌、聲軌的記錄</i><br/>主持：胡欣立，香港恒生大學傳播學院助理教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:15 - 11:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">鍾適芳，政治大學傳播學院副教授<br/><i>勞動歌謠的共振：從許冠傑的「打工仔」到《非遊記》的記敘聲軌</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:45 - 12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">黃俊銘，政治大學傳播學院副教授<br/><i>重探「港台」流行歌曲：文化記憶與交往記憶之爭</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15 - 13:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">午餐（香港黃金海岸酒店沙嗲軒）</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">第三場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>粵語流行音樂的聲景回望</i><br/>主持：高偉雲，阿姆斯特丹大學全球化研究教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">14:00 - 14:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">廖繼權，香港都會大學人文社會科學院助理教授<br/><i>舊日聲景：東南亞粵語流行音樂的過去</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">14:30 - 15:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">陳峙維，英國史特林大學電影與媒體博士<br/><i>從華語到粵語流行歌探訪香港在中文流行歌曲的歷史地位</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:00 - 15:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">茶歇</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">第四場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>我們的港星年代</i><br/>主持：鄭楨慶，香港珠海學院新聞與傳播學系助理教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:15 - 15:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">李展鵬，澳門大學傳播學系助理教授<br/><i>「逝去光彩不復還」：《梅艷芳》的空間運用、文化身份與廣東歌歷史</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">15:45 - 16:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">簡妙如，中正大學傳播學系教授<br/><i>那個又潮又迷人的表哥靚姐：台灣人記憶中的香港流行音樂</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">16:15 - 16:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">茶歇</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">圓桌討論</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>台港流行音樂的前世今生</i><br/>主持：吳世家，香港中文大學新聞與傳播學院專業應用副教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">16:35 - 17:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        李展鵬，澳門大學傳播學系助理教授<br/>
                        簡妙如，中正大學傳播學系教授<br/>
                        黃俊銘，政治大學傳播學院副教授<br/>
                        廖繼權，香港都會大學人文社會科學院助理教授
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">17:35</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">晚餐（香港黃金海岸酒店聆渢咖啡廳）</span>
                    </div>

                  </div>

                  <div className="tips">本次会議由香港特別行政区研究資助局（RGC)跨院校发展計划(UGC/IIDS13/H01/22)全額贊助</div>
                </div>
              )
            }

            {
              currentDate === '1111' && (
                <div className="road-show-index-ch__topic__time-line">
                  <div className="station-detail">
                    <div className="station-detail__left">
                      <div className="station-detail__name"><i></i>香港站</div>
                      <div className="station-detail__address" onClick={handleAddress}>
                        <div>香港屯門青山公路青山灣段80號香港珠海学院 Hall 5</div>
                        <i></i>
                      </div>
                    </div>
                    <div className="station-detail__btn" onClick={showModal}>預約參會</div>
                  </div>

                  <div className="time-line">
                    <div className="time-line__item">
                      <span className="time-line__period">第五場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>從台灣到香港：音樂家周藍萍</i><br/>主持：鄭楨慶，香港珠海學院新聞與傳播學系助理教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">09:00 - 10:30</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">放映會<br/><i>〈音樂家周藍萍〉</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">10:30 - 11:00</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        陳峙維，英國史特林大學電影與媒體博士<br/>
                        周揚明，周藍萍之女，紀錄片導演<br/>
                        黃之樂，北京聚合影聯文化傳媒專案經理<br/>
                        <i>〈音樂家周藍萍〉紀錄片對談</i>
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:00 - 11:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">茶歇</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">第六場</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content"><i>人文、詩與中國民歌</i><br/>主持：孔笑薇，香港珠海學院金融系副教授</span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:15 - 11:45</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">高偉雲，阿姆斯特丹大學全球化研究教授<br/><i>重溫搖滾神話：五條人、李志與宋冬野</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">11:45 - 12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">嚴鋒，復旦大學中國語言文學系教授<br/><i>現代中國文人的非樂化與音樂化</i></span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">
                        馮錦榮，香港珠海學院文學與社會科學院院長<br/>
                        簡妙如，中正大學傳播學系教授<br/>
                        孔笑薇，香港珠海學院金融系副教授<br/>
                        鄭楨慶，香港珠海學院新聞及傳播學系助理教授<br/>
                        <i>會議總結與閉幕式</i>
                      </span>
                    </div>

                    <div className="time-line__item">
                      <span className="time-line__period">12:15</span>
                      <div className="time-line__center">
                        <div className="dot"></div>
                        <div className="line"></div>
                      </div>
                      <span className="time-line__content">惜別午宴(香港黃金海岸酒店粵)</span>
                    </div>

                  </div>

                  <div className="tips">本次会議由香港特別行政区研究資助局（RGC)跨院校发展計划(UGC/IIDS13/H01/22)全額贊助</div>
                </div>
              )
            }
          </div>
        </div>
      </div>

      {/* 讲师 */}
      <div className="road-show-index-ch__teacher" id="teacher">
        <h2>研討會講師</h2>
        <div className="road-show-index-ch__teacher__tips">排名不分先後</div>
        <div className="road-show-index-ch__teacher__content">
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t1.jpg')} />
            <div className="name">馮應謙</div>
            <div className="intro">香港中文大學亞太研究所所長</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t2.jpg')} />
            <div className="name">周耀輝</div>
            <div className="intro">香港浸會大學人文及創作系教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t3.jpg')} />
            <div className="name">簡妙如</div>
            <div className="intro">中正大學傳播學系教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t4.jpg')} />
            <div className="name">高偉雲</div>
            <div className="intro">阿姆斯特丹大學全球化研究中心總監</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t5.jpg')} />
            <div className="name">朱耀偉</div>
            <div className="intro">香港大學香港研究課程教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t6.jpg')} />
            <div className="name">李展鵬</div>
            <div className="intro">澳門大學傳播學系助理教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t7.jpg')} />
            <div className="name">嚴鋒</div>
            <div className="intro">復旦大學中國語言文學系教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t8.jpg')} />
            <div className="name">黄俊銘</div>
            <div className="intro">政治大學傳播學院副教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t9.jpg')} />
            <div className="name">鍾適芳</div>
            <div className="intro">政治大學傳播學院副教授</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t10.jpg')} />
            <div className="name">周揚明</div>
            <div className="intro">周藍萍之女，紀錄片製片</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t11.jpg')} />
            <div className="name">陳峙維</div>
            <div className="intro">台灣大學藝文中心執行長</div>
          </div>
          <div className="road-show-index-ch__teacher__single">
            <img src={require('../../images/t12.jpg')} />
            <div className="name">廖繼權</div>
            <div className="intro">香港都會大學人文社會科學院助理教授</div>
          </div>
        </div>
      </div>

      <div className="road-show-index-ch__float-btn" onClick={showModal}>
        <i></i>預約參會
      </div>

      <div className="road-show-index-ch__survey" title="調查問卷" onClick={showSurveyModal}></div>

      <Modal
        title="請填寫預約信息"
        open={isModalOpen}
        okText="提交"
        cancelText="取消"
        confirmLoading={btnLoading}
        onOk={handleOk}
        onCancel={handleCancel}>
        <Form
          form={appointForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign="left"
          colon={false}
          onFinish={handleFinish}
          autoComplete="off"
        >
          <Form.Item
            label="姓"
            name="first_name"
            rules={[{ required: true, message: '姓不能為空！' }]}
          >
            <Input placeholder="請輸入姓" allowClear />
          </Form.Item>
          <Form.Item
            label="名"
            name="last_name"
            rules={[{ required: true, message: '名不能為空！' }]}
          >
            <Input placeholder="請輸入名" allowClear />
          </Form.Item>
          <Form.Item
            label="郵箱"
            name="email"
            rules={[
              {
                type: 'email',
                message: '郵箱格式不正確！',
              },
              { required: true, message: '郵箱不能為空！' }
            ]}
          >
            <Input placeholder="請輸入郵箱" allowClear />
          </Form.Item>
          <Form.Item
            label="職業"
            name="career"
          >
            <Select
              placeholder="请选择職業"
              options={[
                { value: '學生', label: '學生' },
                { value: '老師', label: '老師' },
              ]}
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="工作單位"
            name="office"
          >
            <Input placeholder="請輸入工作單位" allowClear />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="請填寫調查問卷"
        open={isSurveyModalOpen}
        okText="提交"
        cancelText="取消"
        confirmLoading={btnLoading}
        onOk={handleSurveyOk}
        onCancel={handleSurveyCancel}>
        <Form
          form={surveyForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign="left"
          colon={false}
          onFinish={handleSurveyFinish}
          autoComplete="off"
        >
          <Form.Item
            label="滿意度"
            name="satisfaction"
            rules={[{ required: true, message: '滿意度不能為空！' }]}
          >
            <Select
              placeholder="请选择滿意度"
              options={[
                { value: '不滿意', label: '不滿意' },
                { value: '一般', label: '一般' },
                { value: '滿意', label: '滿意' },
                { value: '非常滿意', label: '非常滿意' },
              ]}
              allowClear
            />
          </Form.Item>
          <Form.Item
            label="建議"
            name="suggestion"
            rules={[{ required: true, message: '建議不能為空！' }]}
          >
            <Input.TextArea placeholder="請輸入建議" allowClear rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default App;